<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    title="强制收卷"
    width="500px"
    @close="handleClose()">

    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="100px">

      <el-form-item label="考卷状态" prop="exState">
        <dic-list-select v-model="postForm.exState" style="width: 100%" dic-code="paper_ex_state"/>
      </el-form-item>

      <el-form-item label="收卷理由" prop="message">
        <el-input v-model="postForm.message" type="textarea"/>
      </el-form-item>

      <el-form-item label="是否有效" prop="valid">
        <el-checkbox v-model="postForm.valid" />
        <el-alert v-if="postForm.valid" :closable="false" title="虽然强制交卷，但成绩依然是有效的！" type="info"/>
        <el-alert v-else :closable="false" type="error" title="违规情节严重，同时取消学员此次考试成绩！"/>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="doHand">确 定</el-button>
    </div>
  </el-dialog>


</template>

<script>
import { forceHand } from '@/api/exam/watch'

export default {
  name: 'ForceHandDialog',
  props: {
    visible: Boolean,
    examId: String,
    paperIds: Array
  },
  data() {
    return {
      dialogVisible: false,
      postForm: {
        valid: true
      },
      rules: {
        exState: [
          { required: true, message: '考卷状态必须选择！' }
        ],
        message: [
          { required: true, message: '收卷理由必须填写！' }
        ],
        valid: [
          { required: true, message: '是否有效必须填写！' }
        ]
      },
      loading: false
    }
  },

  watch: {

    examId: {
      handler(val) {
        this.postForm.examId = val
      }
    },
    paperIds: {
      handler(val) {
        this.postForm.paperIds = val
      }
    },
    // 检测查询变化
    visible: {
      handler() {
        this.dialogVisible = this.visible
      }
    }
  },
  created() {
    // 获取考试信息
    this.postForm.examId = this.examId
    this.postForm.paperIds = this.paperIds

    this.dialogVisible = this.visible
  },
  methods: {

    // 关闭窗口
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('callback')
    },

    // 执行全部交卷
    doHand() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }
        this.$confirm('交卷后考生将无法继续考试，确实要交卷吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          forceHand(this.postForm).then(() => {
            this.$message.success('操作成功！')
            this.loading = false
            this.handleClose()
          })
        })
      })
    }
  }
}
</script>

<style scoped>


</style>

